<template>
	<view class="content">
		<u--image :showLoading="true" :src="src" width="750rpx" height="600rpx" @click="click"></u--image>
		<view class="ui_search">
			<view class="ui_code">验证码:<p v-if="info">{{info.serial_number}}</p></view>
			<view class="ui_input" v-if="!info">
				<input class="ed_input" v-model="code" data-key="code" @input="inputChange"
					placeholder="请输入验证码末四位数进行查询" maxlength="4"></input>
				<view class="ui_btn" @click="search">
					<u-icon name="search" color="#2979ff" size="20"></u-icon>
				</view>
			</view>
			<block v-if="info">
				<view class="status">{{info.status=='10'?'已通过':''}}</view>
				<view class="tip">首次真伪查询</view>
			</block>
		</view>
		<view class="ui_lable" v-if="show_tip">
			<view class="ui_tip"></view>
			<view class="ui_text">验证提示</view>
		</view>
		<view class="ui_err" v-if="show_tip">
			<view class="ui_btn">
				<u-icon v-if="!is_err" name="checkmark-circle-fill" color="#1e9049" size="40"></u-icon>
				<u-icon v-else name="info-circle-fill" color="#F56C6C" size="40"></u-icon>
			</view>
			<view class="ui_text">{{!is_err?'您查询的验证码是正品编码，请放心使用。':'您的输入有误，请重新输入验证码末四位数进行查询。'}}</view>
		</view>
		
		<view class="ui_lable">
			<view class="ui_tip"></view>
			<view class="ui_text">首次查询</view>
		</view>
		<view class="ui_info">
			<view class="left">查询时间：</view>
			<view class="right" v-if="info">{{info.first_query_time}}</view>
		</view>
		<view class="ui_info">
			<view class="left">查询地点：</view>
			<view class="right">未查询</view>
		</view>
		<view class="ui_info">
			<view class="left">运营商：</view>
			<view class="right">未查询</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://img2.baidu.com/it/u=2112311137,2912593221&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
				id:1,
				code:'',
				show_tip: false,
				is_err: false,
				info:null
			}
		},
		onShow(obj) {
			this.id = uni.getStorageSync('code')
			this.info = null
			this.show_tip = false
		},
		methods: {
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			search(){
				if(this.code.length<4){
					this.$util.toast('请输入验证码末四位数')
					return
				}
				let param = {
					id:parseInt(this.id),
					end_number: this.code
				}
				this.$http.req('post', "traceability/code/query", param, this).then(res => {
					var data = res.data.data
					if (res.data.code == 200) {
						console.log(data)
						this.info = data
						this.is_err = false
						if(!data){
							this.show_tip = true
							this.is_err = true
						}
					}else{
						this.show_tip = true
						this.is_err = true
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		width: 750rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.ui_search{
			margin-top: 20rpx;
			width: 690rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 10rpx;
			box-shadow: 3px 0px 3px 1px rgba(0, 0, 0, 0.3);
			.ui_code{
				font-size: 28rpx;
				margin-top: 15rpx;
				margin-left: 10rpx;
				color: #999;
				display: flex;
			}
			.ui_input{
				margin-top: 15rpx;
				margin-left: 10rpx;
				width: 670rpx;
				height: 55rpx;
				border: 1px solid #333;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				.ed_input{
					flex: 1;
					font-size: 28rpx;
					padding-left: 10rpx;
				}
				.ui_btn{
					width: 60rpx;
					height: 100%;
					display: flex;
					justify-content: center;
				}
			}
			.status{
				width: 100%;
				line-height: 40rpx;
				text-align: center;
				color: orange;
			}
			.tip{
				width: 100%;
				line-height: 40rpx;
				text-align: center;
				color: #666;
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
		}
		
		.ui_err{
			width: 690rpx;
			display: flex;
			align-items: center;
			.ui_text{
				margin-right: 50rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #999;
			}
		}
		.ui_lable{
			width: 690rpx;
			height: 70rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #333333;
			.ui_tip{
				width: 10rpx;
				height: 30rpx;
				border-radius: 5rpx;
				background-color: #333333;
				margin-right: 20rpx;
			}
			.ui_text{
				font-weight: bold;
			}
		}
		.ui_info{
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			display: flex;
			font-size: 28rpx;
			width: 610rpx;
			.left{
				flex: 1;
			}
			.right{
				color: #666;
			}
		}
		.img_info{
			width: 690rpx;
		}
	}
</style>
